<template>
  <div class="comBox">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="register"
    >
      <el-form-item label="账号" prop="user">
        <el-input v-model="ruleForm.user"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >注册</el-button
        >
        <el-button @click="$router.push(`/login`)">去登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === ``) {
        callback(new Error(`请输入密码`))
      } else {
        if (this.ruleForm.checkPass !== ``) {
          this.$refs.ruleForm.validateField(`checkPass`)
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === ``) {
        callback(new Error(`请再次输入密码`))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error(`两次输入密码不一致!`))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        user: ``,
        pass: ``,
        checkPass: ``,
      },
      rules: {
        user: [{ trigger: `blur`, message: `必填项` }],
        pass: [{ validator: validatePass, trigger: `blur` }],
        checkPass: [{ validator: validatePass2, trigger: `blur` }],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const form = {
            user: this.ruleForm.user,
            pass: this.ruleForm.pass,
          }
          await this.$http.instance.post(`/user`, form)
          this.$router.push(`/login`)
        } else {
          console.log(`error submit!!`)
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style lang="less" scoped>
.comBox {
  // width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  .register {
    // height: 500px;
    // width: 500px;
  }
}
</style>
